<template>
  <div>
    <h1>欢迎光临_vue开发的收银系统_水果店</h1>
    <div class="box">
      苹果10￥/斤，折扣(8折)
    </div>
    <div class="box">
      请你输入你要购买的斤数 <input type="text" name="" id="" v-model="num">
    </div>
    <div class="box">
      <button @click="sumbtn">结账买单</button>
    </div>
    <div class="box">
      结账单:总价：{{sumprice}}￥元  折后价: {{discount}}￥元  省了:{{save}} ￥元
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 0,
      sumprice: 0,
      discount: 0,
      save: 0
    }
  },
  methods: {
    sumbtn () {
      this.sumprice = this.num * 10
      this.discount = this.num * 8
      this.save = this.sumprice - this.discount
      this.num = 0
    }
  }

}
</script>

<style scoped>
  .box{
    height: 50px;
    width: 600px;
    line-height: 50px;
    border: 2px solid #ccc;
    text-align: center;
  }
</style>
